<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="con" id="con">
        <div class="item"> 
           <img src="images/animal1.png"/>
        </div>
        <div class="item"> 
         <img src="images/animal2.png"/>
        </div>
        <div class="item"> 
         <img src="images/animal3.png"/>
        </div>
     </div>
</body>
<script>
  var con =document.getElementById("con");
  console.log(con.childNodes);
  //节点树属性，childNodes,得到集合包含有 空格 和注释，实用性较差，
  //元素树属性，children， 得到集合包含元素节点   不包含空格和注释
   //适用于子元素数量不确定，然后class属性值不确定，并且可能会动态更新的情况
  for(var i =0;i<itemList.length;i++){
      itemList[i].onmouseover = function(){

        this.style.backgroundColor ="orange";
      }
      itemList[i].onmouseout = function(){

       this.style.backgroundColor ="orange";
    }



  }
</script>
</html>